<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '800px' }"
    title="广告基本信息"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
    :mask-closable="false"
  >
    <n-scrollbar style="max-height: 600px">
      <div v-if="detail" class="ad-modal-content">
        <n-h3>基础信息</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">广告名称</div>
          <div class="p2"
            >{{ detail.adgroupName }}</div
          >
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">广告ID</div>
          <div class="p2">{{ detail.adgroupId }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">操作状态</div>
          <div class="p2">{{ detail.configuredStatus }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">广告状态</div>
          <div class="p2">{{ detail.systemStatus }}</div>
        </div>
        <n-h3>营销内容</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">营销目的</div>
          <div class="p2">{{ detail.marketingGoal }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">推广产品</div>
          <div class="p2">{{ detail.marketingTargetType }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">营销载体</div>
          <div class="p2">{{ detail.marketingCarrierType }}</div>
        </div>
        <n-h3>广告版位</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">广告版位</div>
          <div class="p2">{{ detail.siteSet }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">搜索场景扩量</div>
          <div class="p2">{{ detail.searchExpansionSwitch }}</div>
        </div>
        <n-h3>排期与出价</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">投放日期</div>
          <div class="p2">{{ detail.launchTime }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">投放时间</div>
          <div class="p2">{{ detail.launchDate }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">出价</div>
          <div class="p2">{{ detail.bidAmount }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">出价类型</div>
          <div class="p2">{{ detail.smartBidType }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">优化目标</div>
          <div class="p2">{{ detail.optimizationGoal }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">一键起量</div>
          <div class="p2">{{ detail.autoAcquisitionBudget }}元</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">日预算</div>
          <div class="p2">{{ detail.dailyBudget }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">首日开始时间</div>
          <div class="p2">{{ detail.firstDayBeginTime }}</div>
        </div>
        <n-h3>定向</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">地理位置</div>
          <div class="p2">{{ detail.regions }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">年龄</div>
          <div class="p2">{{ detail.age }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">性别</div>
          <div class="p2">{{ detail.gender }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">换季人群</div>
          <div class="p2">{{ detail.seasonChangeTag }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">学历</div>
          <div class="p2">{{ detail.education }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">婚恋育儿状态</div>
          <div class="p2">{{ detail.maritalStatus }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">排除已转化用户</div>
          <div class="p2">{{ detail.excludedConvertedAudience }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">自定义人群</div>
          <div class="p2">{{ detail.customAudience }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">设备品牌型号</div>
          <div class="p2">{{ detail.deviceBrandModel }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">操作系统版本</div>
          <div class="p2">{{ detail.userOs }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">联网方式</div>
          <div class="p2">{{ detail.networkType }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">设备价格</div>
          <div class="p2">{{ detail.devicePrice }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">微信再营销</div>
          <div class="p2">{{ detail.wechatAdBehavior }}</div>
        </div>
      </div>
    </n-scrollbar>
  </n-modal>
</template>

<script setup lang="ts">
  import { computed, h, onMounted, reactive, ref, watch } from 'vue'
  import { XButton } from '@/components'

  import { NModal, NH3, NSpace, NScrollbar, useMessage } from 'naive-ui'
  import { useStore } from '@/store'
  import { useRoute } from 'vue-router'
  import { defineProps, defineEmits } from 'vue'
  import XDataTable from '@/components/x-data-table/index.vue'
  import { formatDate } from '@/utils'
  const route = useRoute()
  const emit = defineEmits(['success'])
  const message = useMessage()
  const store = useStore()
  const accountCode = computed(() => {
    return route.query.accountCode
  })
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const detail = ref({})
  onMounted(() => {
    getDetail()
  })
  const getDetail = () => {
    store
      .dispatch('intelligent/gdtAdgroupsDetail', {
        accountCode: getProps.modalData.row.accountCode,
        adgroupId: getProps.modalData.row.adgroupId
      })
      .then((res) => {
        detail.value = res.data || null
      })
  }
</script>

<style scoped lang="scss">
  .ad-modal-content {
    &-item {
      display: flex;
      margin-bottom: 8px;
      .p1 {
        min-width: 120px;
      }
      .p2 {
      }
    }
  }
</style>
